<template>
  <div>
      <navbar></navbar>
      <div class="detailinfo">
          <div class="video">
              <video :src="model.content" controls="controls" autoplay></video>
              
          </div>
          <div class="detailinfoText">
              <div>
                  <span>{{model.category.title}}</span>
                  <span>{{model.name}}</span>
                </div>
              <div>
                  <span>{{model.userinfo.name}}</span>
                  <span>146.4万次观看</span>
                  <span>5281弹幕</span>
                  <span>{{model.date}}</span>
              </div>
              <div>
                <p>
                  <span class="iconfont icon-shoucang"></span>
                  <span>收藏</span>
                </p>
                <p>
                  <span class="iconfont icon-huancun"></span>
                  <span>缓存</span>
                </p>
                <p>
                  <span class="iconfont icon-fenxiang"></span>
                  <span>分享</span>
                </p>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import Navbar from '@/components/common/Navbar'
export default {
     data () {
         return {
            model:{}
         }
     },
    components: {
        Navbar
    },
    methods:{
        async articleitemData () {
            const res = await this.$http.get('/article/' + this.$route.params.id)
            this.model = res.data[0]
            console.log(this.model);
        }
    },
    created () {
        this.articleitemData()
    }
}
        Navbar
</script>

<style lang="stylus" scoped>
  .detailinfo
    background-color white
    .video
       width 100%
       video 
         width 100%
    .detailinfoText
      padding 15px
      div:nth-child(1)
        span:nth-child(1)
          padding-right 10px
          color #fb7299
          border-radius  10px
      div:nth-child(2)
        padding 8px 0
        span 
          padding-right 5px 
          color #aaa
          font-size 12px
        span:nth-child(1)
          color black 
          font-size 15px
          padding-right 10px 
      div:nth-child(3)
        display flex
        p
          color #757575
          margin-right 15px 
          display flex
          align-items center
          span:nth-child(1)
            font-size 21px
            padding-right 3px 
          span:nth-child(2)
            font-size 13px 
            
          
</style>